.tools-right {
  z-index: 1006;
  position: absolute;
  right: 6px;
  // width: 46px;
  display: flex;
  align-items: center;
  flex-direction: column;

  .avatar {
    width: 46px;
    height: 46px;
    background: #d8d8d8;
    border: 2px solid #ffffff;
    border-radius: 50%;
    margin-bottom: 9px;
    position: relative;

    .avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }

    .add {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, 70%);
      background-color: #ffffff;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;

      .add-icon {
        width: 20px;
        height: 20px;
        vertical-align: middle;
      }
    }
  }

  .tools-right-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 17px;

    .starImg {
      width: 32px;
      height: 32px;
    }

    .collectImg {
      width: 36px;
      height: 36px;
    }

    .recordImg {
      width: 43px;
      height: 43px;
      animation: rotateImg 3s linear infinite;
    }

    text {
      font-size: 12px;
    }

    &:nth-child(odd) {
      margin-top: 15px;
    }
  }
}

.tools-right-distance-video {
  bottom: 50px;
}

.tools-right-distance-img {
  bottom: 23px;
}

@keyframes rotateImg {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}